<template>
  <div>
    <div class="guild-content">
        <div class="guild-mains">
          <div class="guild-user">
            <div class="guild-user-time">
              2024-08-01 ~ 2024-08-31
            </div>
            <div class="guild-user-text">
              <div class="guild-user-name">
                One-click issuance
              </div>
            </div>
            <div class="guild-user-acont">
              <span>Balance：</span>
              <span>105220</span>
            </div>
          </div>
          <div class="guild-list" v-for="(guild,index) in payrallList" :key="index">
            <div class="guild-area">
              <span>{{ guild.name }}</span>
            </div>
            <div class="guild-btn" @click="handleDetails(guild)">
              <span>{{ guild.number }}</span>
              <span class="red">Details</span>
            </div>
          </div>
        </div>
        <van-dialog v-model:show="dialogVisible" title="Prompt" confirmButtonText="Confirm Distribution" confirmButtonColor="#00F9E5">
          <div class="dialog-content">
            <div class="dialog-title">
              <div class="dialog-title-p">Date</div>
              <div class="dialog-title-p">Diamond Revenue</div>
            </div>
            <div class="dialog-mains">
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
              <div class="dialog-list">
                <div class="dialog-list-p">024-09-13 </div>
                <div class="dialog-list-p">200.00 </div>
              </div>
            </div>
            <div class="dialog-footer">
              <div class="dialog-title-p">Total</div>
              <div class="dialog-title-p">2000.00 </div>
            </div>
          </div>
        </van-dialog>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'Payroll',
  filters: {
    priceFormat(value) {
      return Number(value).toFixed(2)
    }
  },
  data() {
    return {
      value:'',
      dialogVisible:false,
      payrallList:[
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
        {
          logo:'https://img0.baidu.com/it/u=1661545295,4198669375&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726246800&t=3045780ebf845703fcbd0ffb3275d639',
          area:'https://t11.baidu.com/it/u=2407335962,4159351460&fm=58&app=83&f=JPEG?w=200&h=132',
          name:'Boss agncey',
          number:102222,
          details:[
            {
              time:'2024-09-13',
              revenue:290
            }
          ]
        },
      ],
      payrallDetails:{},
      detailsList:[
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        },
        {
          time:'2024-09-13',
          revenue:290
        }
      ]
    }
  },
  computed: {
   
  },
  created() {
  },
  mounted() {
   
  },
  
  methods: {
    // 查看详情
    handleDetails(guild){
      console.log('guild',guild)
      console.log('payrallDetails',this.payrallDetails)
      this.payrallDetails = guild
      this.dialogVisible = true
      
    }
  },
}
</script>

<style scoped lang="scss">
  body{
    background-color: #F7F7F7 !important;
  }
  .guild-content {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 15px;
    .guild-mains{
      width: 100%;
      height: auto;
      .guild-list{
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 10px;
        border-radius: 10px;
        margin-top: 15px;
        background-color: #E1E1E1;
        position: relative;
        .guild-logo{
          width: 40px;
          height: 40px;
          float: left;
          margin-right: 10px;
          img{
            width: 40px;
            height: 40px;
            display: block;
            border-radius: 2px;
          }
        }
        .guild-area{
          height: 40px;
          box-sizing: border-box;
          padding: 10px 0;
          float: left;
          img{
            width: 20px;
            height: 20px;
            display: inline-block;
          }
          span{
            font-size: 15px;
            line-height: 20px;
            margin-left: 10px;
            color: #666666;
          }
        }
        .guild-btn{
          height: 40px;
          border-radius: 15px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          color: #999999;
          float: right;
          .red{
            margin-left: 10px;
            color: red;
          }
        }
      }
      .guild-user{
        width: 100%;
        height: 120px;
        background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
        box-sizing: border-box;
        padding:10px 15px;
        border-radius: 10px;
        .guild-user-time{
          line-height: 20px;
          font-size: 13px;
          color: #F7F7F7;
          text-align: left;
        }
        .guild-user-acont{
          line-height: 20px;
          font-size: 13px;
          color: #E1E1E1;
          text-align: center;
          color: #666;
        }
        .guild-user-text{
          width:100%;
          height: 40px;
          margin: 10px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          .guild-user-name{
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 20px;
            background-color: rgba(255,255,255,0.4);
            color: #666666;
          }
        }
      }
      .guild-user-list{
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 10px 15px;
        border-radius: 10px;
        margin-top: 20px;
        background-color: #FFF;
        position: relative;
        line-height: 40px;
        .item-icon{
          width: 40px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          color: #999;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 24px;
        }
      }
    }
  }
  .dialog-content{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 10px;
    .dialog-mains{
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 10px 0;
      .dialog-list{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        .dialog-list-p{
          line-height: 34px;
          text-align: center;
          font-size:15px;
          color: #333;
          justify-content: center;
          align-items: center;
          display: flex;
          flex: 1;
        }
      }
    }
    .dialog-title{
      width: 100%;
      height: 34px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      .dialog-title-p{
        line-height: 34px;
        text-align: center;
        font-size:15px;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        flex: 1;
        font-weight: 600;
      }
    }
    .dialog-footer{
      width: 100%;
      height: 34px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      .dialog-title-p{
        line-height: 34px;
        text-align: center;
        font-size:15px;
        color: #333;
        justify-content: center;
        align-items: center;
        display: flex;
        flex: 1;
        font-weight: 600;
      }
    }
  }
  
</style>
